<template>
  <v-app-bar
    app
    fixed
    color="primary"
    density="compact"
    scroll-behavior="elevate"
    dark
  >
    <template v-slot:prepend>
      <v-btn
        icon="mdi-chevron-left"
        @click="goBack"
      ></v-btn>
    </template>
    <v-app-bar-title>报告明细</v-app-bar-title>
  </v-app-bar>

  <!-- 主内容区域 -->
  <v-main class="pt-0">
    <v-container class="px-2">
      <!-- 报告内容 -->
      <v-card
        elevation="2"
        class="pa-4"
        v-if="record !== null"
      >
        <div>
          <strong>检测时间:</strong>
          {{ utcToLocal(record.createTime) }}
        </div>
        <InfoCard :item="baseInfo"></InfoCard>
        <!-- 主要体质 -->
        <div class="corp-prob my-2">
          <v-chip
            size="small"
            variant="flat"
            v-for="(corp, idx) in corpDetail"
            :key="idx"
            class="ma-1"
            :variant="flat"
            :color="`indigo-lighten-${1 + idx}`"
            label
            :prepend-icon="idx == 0 ? 'mdi-tag' : ''"
          >
            <span class="text-decoration-underline">
              {{ corp.cor }}/{{ parseFloat(corp.prob).toFixed(1) }}%
            </span>
          </v-chip>
        </div>
        <v-row
          class="my-2 ml-1"
          v-if="noFeedback"
        >
          <v-btn
            variant="tonal"
            color="warning"
            @click="doFeedback"
          >
            填写反馈
          </v-btn>
        </v-row>
        <v-card
          tonal
          v-for="item in modules"
          :key="item.moduleIndex"
          elevation="2"
          color="indigo"
          class="mb-2"
        >
          <v-card-title>
            {{ item.moduleName.substr(0, item.moduleName.length - 1) }}
          </v-card-title>
          <v-card-text>
            <p v-for="(desc, idx) in item.descList">
              {{ desc.descText }}
            </p>
          </v-card-text>
        </v-card>
      </v-card>
    </v-container>
  </v-main>
</template>

<script setup>
  import { ref } from "vue";
  import { useRoute } from "vue-router";
  import InfoCard from "../components/InfoCard.vue";
  import { getRecordDetail } from "../api";
  import { utcToLocal } from "../utils/dateUtils";

  const route = useRoute();
  const router = useRouter();

  const record_id = route.params.id;

  const noFeedback = ref(true);
  // 定义面包屑导航数据
  const loading = ref(false);
  const record = ref(null);

  const corpDetail = ref(null);
  const modules = reactive([]);
  const baseInfo = ref();
  const doFeedback = () => {
    router.push({ name: "RecordFeedback", id: record_id });
  };

  const goBack = () => {
    router.go(-1);
  };

  onMounted(async () => {
    loading.value = true;
    try {
      const response = await getRecordDetail(record_id);
      record.value = response;
      baseInfo.value = {
        avatarUrl: response.faceImg,
        name: response.name,
        age: response.age,
        gender: response.gender == 1 ? "男" : "女",
        height: response.height,
        width: response.width,
      };
      corpDetail.value = JSON.parse(response.countDetail);
      let moduleList = JSON.parse(response.summaryV1).moduleList;
      modules.push(...moduleList);
      setInterval(() => {
        loading.value = false;
      }, 1000);
    } catch (error) {
      console.error("获取数据失败", error);
      loading.value = false;
      if (error.response && error.response.data.message) {
        errorMessage.value = error.response.data.message;
      } else {
        errorMessage.value = "获取数据异常";
      }
    }
  });
</script>

<style scoped>
  .v-container {
    max-width: 800px;
  }
  /* 报告纸张样式 */
  .record-sheet {
    background-color: #3f3;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    margin: 0 auto;
  }

  .bio {
    display: flex;
    justify-content: space-between;
  }

  .info {
    display: inline-block;
  }

  .v-breadcrumbs {
    font-size: 0.8rem;
    height: 1.2rem;
  }
  .v-card {
    border-radius: 0;
  }
</style>
